<template>
  <view class="login-container" :style="{ paddingTop: navHeight + 'px' }">
    <view style="width: 30px;height: 30px;position: absolute;left: 10px;top: 38px;" @click="goBack">
      <image src="/static/left_arrow.png" style="width: 100%;height: 100%;" />
    </view>
    <!-- 头像上传区域 -->
    <view class="avatar-section">
      <view class="avatar-container" @click="showAvatarModal = true">
        <image class="avatar-placeholder" :src="avatarUrl" mode="aspectFill"></image>
        <!-- <image class="avatar-placeholder" :src="avatarUrl" mode="aspectFill"></image> -->
        <view class="camera-icon">
          <image src="/static/login/cancer.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <!-- 输入表单区域 -->
    <view class="form-section">
      <!-- 昵称输入框 -->
      <view class="input-group">
        <text class="input-label">昵称</text>
        <view class="input-container">
          <input class="input-field" v-model="userInfo.nickname" placeholder="请设置昵称" />
          <image v-if="userInfo.nickname" class="clear-icon" src="/static/clear.png" mode="aspectFit"
            @tap="clearField('nickname')"></image>
        </view>
      </view>



      <!-- 性别选择 -->
      <view class="input-group">
        <text class="input-label">性别</text>
        <view class="input-container" @tap="selectGender">
          <input class="input-field" :value="genderDisplayText" placeholder="请选择性别" disabled />
          <image class="arrow-icon" src="/static/login/arrow_icon222.png" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 生日选择 -->
      <view class="input-group">
        <text class="input-label">你的生日</text>
        <view class="input-container" @tap="showDatePicker = true">
          <input class="input-field" v-model="userInfo.birthday" placeholder="请选择生日" disabled />
          <image class="arrow-icon" src="/static/login/arrow_icon222.png" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 城市选择 -->
      <view class="input-group">
        <text class="input-label">你所在的城市</text>
        <view class="input-container" @tap="showCityPicker = true">
          <input class="input-field" v-model="userInfo.city" placeholder="请选择城市" disabled />
          <image class="arrow-icon" src="/static/login/arrow_icon222.png" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 生肖选择 -->
      <view class="input-group">
        <text class="input-label">生肖</text>
        <view class="input-container" @tap="selectZodiac">
          <input class="input-field" v-model="userInfo.zodiac" placeholder="请选择生肖" disabled />
          <image class="arrow-icon" src="/static/login/arrow_icon222.png" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 血型选择 -->
      <view class="input-group">
        <text class="input-label">血型</text>
        <view class="input-container" @tap="selectBloodType">
          <input class="input-field" v-model="userInfo.bloodType" placeholder="非必填" disabled />
          <image class="arrow-icon" src="/static/login/arrow_icon222.png" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 个人偏好 -->
      <view class="input-group">
        <text class="input-label">个人偏好</text>
        <view class="input-container">
          <input class="input-field" v-model="userInfo.preference" placeholder="请输入吃饭口味偏好(非必填)" />
          <image v-if="userInfo.preference" class="clear-icon" src="/static/clear.png" mode="aspectFit"
            @tap="clearField('preference')"></image>
        </view>
      </view>


    </view>

    <!-- 底部按钮区域 -->
    <view class="button-section">
      <button class="skip-btn" @tap="skipSetup">跳过</button>
      <button class="confirm-btn" @tap="confirmSetup">确定</button>
    </view>

    <!-- 头像底部抽屉 -->
    <view v-if="showAvatarModal" class="avatar-drawer-mask" @click="showAvatarModal = false">
      <view class="avatar-drawer" @click.stop>
        <view class="avatar-drawer-action" @click="makeAIAvatar">拍摄</view>
        <view class="avatar-drawer-action" @click="uploadAvatar">从相册选择</view>
      </view>
    </view>

    <!-- 城市选择器 -->
    <tn-picker v-model="showCityPicker" mode="region" @confirm="onCityPickerConfirm" :defaultRegion="defaultRegion">
    </tn-picker>

    <!-- 日期选择器 -->
    <tn-picker v-model="showDatePicker" mode="time" @confirm="onDatePickerConfirm" :defaultDate="defaultDate"
      :params="params">
    </tn-picker>

    <!-- 图片裁剪组件 -->
    <image-cropper v-if="showCropper" :imgSrc="tempImagePath" @crop-success="confirmCrop"
      @cancel="showCropper = false" />

  </view>
</template>

<script>
import ImageCropper from "./ImageCropper.vue"
import { pathToBase64 } from 'mmmm-image-tools'
export default {
  components: {
    ImageCropper,
  },
  data() {
    return {
      navHeight: '', //整体顶部导航栏的高度
      statusBarHeight: '', //状态栏高度
      userInfo: {
        nickname: '',
        birthday: '',
        city: '',
        bloodType: '',
        zodiac: '',  // 添加生肖字段
        preference: '', // 个人偏好
        sex: '', // 性别
        user_head: '', // 头像URL
      },
      // 权限状态标识
      cameraPermissionAgreed: false, // 相机权限是否已同意
      albumPermissionAgreed: false, // 相册权限是否已同意
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false
      },
      showCityPicker: false,
      showDatePicker: false,
      showBirthTimePicker: false,
      defaultRegion: ['广东省', '深圳市', '南山区'],
      defaultDate: '', // 默认日期
      defaultBirthTime: '', // 默认出生时间
      showAvatarModal: false,
      showCropper: false,
      tempImagePath: "", // 临时图片路径
      avatarUrl: "", // 默认头像
    }
  },
  computed: {
    genderDisplayText() {
      const sex = this.userInfo.sex;
      // 处理字符串和数字类型的性别值
      if (sex === '0' || sex === 0 || sex === '女') return '女';
      if (sex === '1' || sex === 1 || sex === '男') return '男';
      return '';
    }
  },
  watch: {
    'userInfo.sex': {
      handler(newVal, oldVal) {
      },
      immediate: true
    }
  },
  onLoad() {
    let {
      statusBarHeight,
      system
    } = uni.getSystemInfoSync();
    this.statusBarHeight = statusBarHeight;
    this.navHeight = statusBarHeight + (system.indexOf("iOS") > -1 ? 44 : 48);

    // 检查权限状态
    this.loadPermissionStatus();

    // 检查是否有已保存的用户信息
    const savedProfile = uni.getStorageSync('userInfo');


    if (savedProfile) {
      // 如果有保存的用户信息，填充表单
      this.userInfo = {
        ...this.userInfo,
        nickname: savedProfile.nickname || '',
        birthday: savedProfile.birthday || '',
        city: savedProfile.address || '',
        bloodType: savedProfile.blood_type || '',
        zodiac: savedProfile.zodiac || '',
        preference: savedProfile.preferences || '',
        sex: savedProfile.sex !== undefined && savedProfile.sex !== null ? String(savedProfile.sex) : '', // 确保数字0不被转换为空字符串
        user_head: savedProfile.user_head || '',
      };

      // 如果有头像，显示保存的头像
      if (savedProfile.user_head) {
        this.avatarUrl = savedProfile.user_head;
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    // 加载权限状态
    loadPermissionStatus() {
      this.cameraPermissionAgreed = uni.getStorageSync('cameraPermissionAgreed') || false;
      this.albumPermissionAgreed = uni.getStorageSync('albumPermissionAgreed') || false;
    },
    
    // 保存相机权限状态
    saveCameraPermissionStatus() {
      this.cameraPermissionAgreed = true;
      uni.setStorageSync('cameraPermissionAgreed', true);
    },
    
    // 保存相册权限状态
    saveAlbumPermissionStatus() {
      this.albumPermissionAgreed = true;
      uni.setStorageSync('albumPermissionAgreed', true);
    },
    // 清除输入框内容
    clearField(field) {
      this.userInfo[field] = '';
    },
    // 选择日期
    selectDate() {
      this.showDatePicker = true;
    },

    // 日期选择确认回调
    onDatePickerConfirm(e) {

      // 处理年月日时分的完整格式
      if (e && e.year && e.month && e.day && e.hour !== undefined && e.minute !== undefined) {
        // 确保月、日、时、分都是两位数格式
        const year = e.year;
        const month = String(e.month).padStart(2, '0');
        const day = String(e.day).padStart(2, '0');
        const hour = String(e.hour).padStart(2, '0');
        const minute = String(e.minute).padStart(2, '0');

        // 组合成完整的日期时间字符串
        this.userInfo.birthday = `${year}-${month}-${day} ${hour}:${minute}`;
        this.defaultDate = this.userInfo.birthday;
      } else if (e && typeof e === 'string') {
        // 如果返回的是日期字符串，保留原样
        this.userInfo.birthday = e;
        this.defaultDate = e;
      } else if (e && e.value) {
        // 如果返回的是包含value的对象
        this.userInfo.birthday = e.value;
        this.defaultDate = e.value;
      }

      this.showDatePicker = false;
    },
    // 选择城市确认回调
    onCityPickerConfirm(e) {
      // 检查tn-picker返回的数据结构

      // 根据日志显示的实际数据结构进行处理
      if (e && e.province && e.province.label &&
        e.city && e.city.label) {
        // 处理省市区对象中的label属性
        const province = e.province.label || '';
        const city = e.city.label || '';
        const area = e.area && e.area.label ? e.area.label : '';

        this.userInfo.city = province + '-' + city + (area ? '-' + area : '');
        this.defaultRegion = [e.province.value, e.city.value, e.area ? e.area.value : ''];
      } else if (e && e.length === 3) {
        // 如果e是数组格式
        this.userInfo.city = e[0] + '-' + e[1] + '-' + e[2];
        this.defaultRegion = [e[0], e[1], e[2]];
      } else if (e && e.value && e.value.length === 3) {
        // 如果e是对象格式，包含value数组
        this.userInfo.city = e.value[0] + '-' + e.value[1] + '-' + e.value[2];
        this.defaultRegion = e.value;
      } else if (e && e.label && e.label.length === 3) {
        // 如果e包含label数组
        this.userInfo.city = e.label[0] + '-' + e.label[1] + '-' + e.label[2];
        this.defaultRegion = e.label;
      } else if (e && typeof e === 'object') {
        // 获取可能的省市区属性名
        const province = e.province || e.provinceName || '';
        const city = e.city || e.cityName || '';
        const area = e.area || e.areaName || e.district || '';

        if (province && city) {
          this.userInfo.city = province + '-' + city + (area ? '-' + area : '');
          this.defaultRegion = [province, city, area || ''];
        }
      }

      this.showCityPicker = false;
    },
    // 选择生日时间
    selectBirthTime() {
      this.showBirthTimePicker = true;
    },

    // 选择血型
    selectBloodType() {
      const bloodTypes = ['A型', 'B型', 'AB型', 'O型'];
      uni.showActionSheet({
        itemList: bloodTypes,
        success: (res) => {
          this.userInfo.bloodType = bloodTypes[res.tapIndex];
        }
      });
    },

    // 选择生肖
    selectZodiac() {
      const zodiacs = ['子鼠', '丑牛', '寅虎', '卯兔', '辰龙', '巳蛇', '午马', '未羊', '申猴', '酉鸡', '戌狗', '亥猪'];
      uni.showActionSheet({
        itemList: zodiacs,
        success: (res) => {
          this.userInfo.zodiac = zodiacs[res.tapIndex];
        }
      });
    },

    // 选择性别
    selectGender() {
      const genders = ['女', '男'];
      uni.showActionSheet({
        itemList: genders,
        success: (res) => {
          // 将选择的索引转换为对应的数值：0=女，1=男
          const genderValue = res.tapIndex === 0 ? '0' : '1';
          this.userInfo.sex = genderValue;
        }
      });
    },

    // 跳过设置
    skipSetup() {
      // 获取当前缓存的用户数据
      let currentUserInfo = uni.getStorageSync('userInfo') || {};
      // 设置跳过标识，表示用户已经跳过资料填写
      currentUserInfo.has_skipped_profile = true;
      currentUserInfo.profile_completed = false; // 明确标记资料未完成
      // 保存更新后的用户信息到本地
      uni.setStorageSync('userInfo', currentUserInfo);
      // 跳转到私人秘书选择页面
      uni.navigateBack({
        delta: 2
      });
      // uni.navigateTo({
      //   url: '/minePages/login3'
      // });
    },
    // 确认设置
    confirmSetup() {
      // 验证所有必填字段
      if (!this.userInfo.nickname.trim()) {
        return uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        });
      }

      // if (!this.userInfo.preference.trim()) {
      //   return uni.showToast({
      //     title: '请输入个人偏好',
      //     icon: 'none'
      //   });
      // }

      if (!this.userInfo.birthday) {
        return uni.showToast({
          title: '请选择生日',
          icon: 'none'
        });
      }

      if (!this.userInfo.city) {
        return uni.showToast({
          title: '请选择城市',
          icon: 'none'
        });
      }
      if (!this.userInfo.zodiac) {
        return uni.showToast({
          title: '请选择生肖',
          icon: 'none'
        });
      }
      if (!this.userInfo.sex) {
        return uni.showToast({
          title: '请选择性别',
          icon: 'none'
        });
      }
      // 显示加载中
      uni.showLoading({
        title: '保存中...'
      });
      // 获取当前缓存的用户数据
      let currentUserInfo = uni.getStorageSync('userInfo') || {};
      // 请求参数
      const params = {
        userid: currentUserInfo.userid || '',
        user_head: this.avatarUrl,
        nickname: this.userInfo.nickname,
        birthday: this.userInfo.birthday,
        address: this.userInfo.city,
        zodiac: this.userInfo.zodiac,
        blood_type: this.userInfo.bloodType || '',
        preferences: this.userInfo.preference,
        sex: this.userInfo.sex // 添加性别字段
      };

      // 调用保存接口
      this.$Request.postApi('/bot/api/agentsaveuserinfonew', params).then(res => {
        uni.hideLoading();
        if (res.status === 1) {
          // 保存成功，更新本地缓存
          // 将用户填写的信息追加到当前缓存中
          currentUserInfo = {
            ...currentUserInfo,
            nickname: this.userInfo.nickname,
            birthday: this.userInfo.birthday,
            address: this.userInfo.city,
            zodiac: this.userInfo.zodiac,
            blood_type: this.userInfo.bloodType || '',
            preferences: this.userInfo.preference,
            sex: this.userInfo.sex || '' // 添加性别字段
          };
          // 如果有上传新头像，也更新
          if (this.avatarUrl) {
            currentUserInfo.user_head = this.avatarUrl;
          }
          // 标记用户已完成资料填写
          currentUserInfo.profile_completed = true;
          currentUserInfo.has_skipped_profile = false; // 确保跳过标识被清除
          // 保存更新后的用户信息到本地
          uni.setStorageSync('userInfo', currentUserInfo);

          // 发送事件通知mine页面更新用户信息
          uni.$emit('updateUserInfo', {
            userInfo: currentUserInfo,
            updatedFields: {
              nickname: this.userInfo.nickname,
              birthday: this.userInfo.birthday,
              address: this.userInfo.city,
              zodiac: this.userInfo.zodiac,
              blood_type: this.userInfo.bloodType || '',
              preferences: this.userInfo.preference,
              sex: this.userInfo.sex || '',
              user_head: this.avatarUrl
            }
          });

          // 提示成功
          uni.showToast({
            title: '保存成功',
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 2
            });
          }, 1500);
        } else {
          // 保存失败
          uni.showToast({
            title: res.message,
            icon: 'none'
          });
        }
      })
        .catch(err => {
          uni.hideLoading();
          console.error('保存用户信息失败', err);
          uni.showToast({
            title: '保存失败，请检查网络',
            icon: 'none'
          });
        });
    },
    // 拍摄
    makeAIAvatar() {
      // 检查是否已经同意过相机权限
      if (this.cameraPermissionAgreed) {
        // 已经同意过，直接执行拍摄逻辑
        this.performCameraCapture();
      } else {
        // 未同意过，显示相机权限说明
        uni.showModal({
          title: '相机权限说明',
          content: '需要请求您的相机用于上传用户头像等个性化功能的使用及完整体验',
          confirmText: '同意',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              // 用户同意，保存权限状态并执行拍摄逻辑
              this.saveCameraPermissionStatus();
              this.performCameraCapture();
            } else {
              // 用户取消，关闭头像选择弹窗
              // this.showAvatarModal = false;
            }
          }
        });
      }
    },
    
    // 执行相机拍摄
    performCameraCapture() {
      // #ifdef MP-WEIXIN
      // 微信小程序环境下使用 chooseMedia 和 cropImage
      wx.chooseMedia({
        count: 1,
        mediaType: ["image"],
        sourceType: ["camera"],
        success: (res) => {
          const tempFilePath = res.tempFiles[0].tempFilePath

          // 关闭弹窗
          this.showAvatarModal = false

          // 直接调用微信裁剪API
          wx.cropImage({
            src: tempFilePath,
            cropScale: "1:1", // 1:1 裁剪比例
            success: (cropRes) => {
              // 裁剪成功，更新头像
              this.avatarUrl = cropRes.tempFilePath

              // 显示上传中提示
              uni.showLoading({
                title: '上传中...'
              });

              // 调用接口上传头像
              this.uploadAvatarToServer(cropRes.tempFilePath);
            },
            fail: (err) => {
              console.error("裁剪失败", err)
              uni.showToast({
                title: "裁剪失败",
                icon: "none",
                duration: 2000,
              })
            },
          })
        },
      })
      // #endif
      // 制作AI头像逻辑
      // #ifndef MP-WEIXIN
      uni.chooseImage({
        count: 1,
        sourceType: ["camera"],
        success: (res) => {
          // 关闭头像选择弹窗
          this.showAvatarModal = false

          // 打开裁剪组件
          this.tempImagePath = res.tempFilePaths[0]
          this.showCropper = true
        },
      })
      // #endif
    },
    // 从相册选择
    uploadAvatar() {
      // 检查是否已经同意过相册权限
      if (this.albumPermissionAgreed) {
        // 已经同意过，直接执行相册选择逻辑
        this.performAlbumSelection();
      } else {
        // 未同意过，显示相册权限说明
        uni.showModal({
          title: '相册权限说明',
          content: '需要请求您的相册用于上传用户头像等个性化功能的使用及完整体验',
          confirmText: '同意',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              // 用户同意，保存权限状态并执行相册选择逻辑
              this.saveAlbumPermissionStatus();
              this.performAlbumSelection();
            } else {
              // 用户取消，关闭头像选择弹窗
              // this.showAvatarModal = false;
            }
          }
        });
      }
    },
    
    // 执行相册选择
    performAlbumSelection() {
      // #ifdef MP-WEIXIN
      // 微信小程序环境下使用 chooseMedia 和 cropImage
      wx.chooseMedia({
        count: 1,
        mediaType: ["image"],
        sourceType: ["album"],
        success: (res) => {
          const tempFilePath = res.tempFiles[0].tempFilePath

          // 关闭弹窗
          this.showAvatarModal = false

          // 直接调用微信裁剪API
          wx.cropImage({
            src: tempFilePath,
            cropScale: "1:1", // 1:1 裁剪比例
            success: (cropRes) => {
              // 裁剪成功，更新头像
              this.avatarUrl = cropRes.tempFilePath

              // 显示上传中提示
              uni.showLoading({
                title: '上传中...'
              });

              // 调用接口上传头像
              this.uploadAvatarToServer(cropRes.tempFilePath);
            },
            fail: (err) => {
              console.error("裁剪失败", err)
              uni.showToast({
                title: "裁剪失败",
                icon: "none",
                duration: 2000,
              })
            },
          })
        },
        fail: (err) => {
          console.error("选择图片失败", err)
          uni.showToast({
            title: "选择图片失败",
            icon: "none",
            duration: 2000,
          })
        },
      })
      // #endif
      // #ifndef MP-WEIXIN
      uni.chooseImage({
        count: 1, // 最多可以选择的图片张数
        sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], // 从相册选择
        success: (res) => {
          // 返回选定照片的本地文件路径列表
          const tempFilePath = res.tempFilePaths[0]

          // 更新头像预览
          // this.avatarUrl = tempFilePath

          // 关闭弹窗
          this.showAvatarModal = false
          // 打开裁剪组件
          this.tempImagePath = tempFilePath
          this.showCropper = true
          // 这里可以添加上传到服务器的逻辑
          // 例如：
          // uni.uploadFile({
          //   url: 'YOUR_UPLOAD_API',
          //   filePath: tempFilePath,
          //   name: 'file',
          //   success: (uploadRes) => {
          //     console.log('上传成功', uploadRes);
          //   },
          //   fail: (err) => {
          //     console.error('上传失败', err);
          //   }
          // });

          // 显示上传成功提示
          // uni.showToast({
          //   title: "头像已更新",
          //   icon: "none",
          //   duration: 2000,
          // })
        },
        fail: (err) => {
          console.error("选择图片失败", err)
          uni.showToast({
            title: "选择图片失败",
            icon: "none",
            duration: 2000,
          })
        },
      })
      // #endif
    },
    confirmCrop(e) {
      // e.path 为裁剪后的图片本地路径
      const filePath = e.path;
      this.showCropper = false;
      // 更新本地预览头像
      this.avatarUrl = filePath;
      // 显示上传中提示
      uni.showLoading({
        title: '上传中...'
      });
      // 调用头像上传接口
      this.uploadAvatarToServer(filePath);
    },
    // 上传头像到服务器
    uploadAvatarToServer(filePath) {
      // 校验文件路径
      if (!filePath) {
        uni.showToast({
          title: '文件路径无效',
          icon: 'none'
        });
        return;
      }
      uni.showLoading({ title: '上传中...' });
      // 获取用户ID
      const userInfo = uni.getStorageSync('userInfo') || {};
      const userid = userInfo.userid || userInfo.data?.userid || '';

      // 将图片转为base64
      pathToBase64(filePath).then(base64 => {
        // 调用上传接口
        this.$Request.postApi("/bot/api/agentcpicturepost", {
          userid: userid,
          file: base64
        }).then(res => {
          uni.hideLoading();
          if (res.status === 1) {
            // 更新头像URL到页面显示
            this.avatarUrl = res.data;
            this.userInfo.user_head = res.data;

            // 保存到本地存储，确保刷新页面后不会丢失
            let currentUserInfo = uni.getStorageSync('userInfo') || {};
            currentUserInfo.user_head = res.data;
            uni.setStorageSync('userInfo', currentUserInfo);

            // 发送事件通知mine页面更新头像
            uni.$emit('updateUserAvatar', {
              avatarUrl: res.data,
              userInfo: currentUserInfo
            });

            uni.showToast({
              title: '头像上传成功',
              icon: 'none'
            });
          } else {
            uni.showToast({
              title: res.message || '上传失败',
              icon: 'none'
            });
          }
        }).catch(err => {
          uni.hideLoading();
          console.error('上传头像失败', err);
          uni.showToast({
            title: '上传失败，请重试',
            icon: 'none'
          });
        });
      }).catch(err => {
        uni.hideLoading();
        console.error('图片处理失败', err);
        uni.showToast({
          title: '图片处理失败',
          icon: 'none'
        });
      });
    }
  }
}
</script>

<style>
page {
  background-color: #ffffff;
}
</style>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  height: auto;
  background-image: url('/static/login/login2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
}

.avatar-section {
  margin-top: 60rpx;
}

.avatar-container {
  position: relative;
  width: 159.84rpx;
  height: 159.84rpx;
}

.avatar-placeholder {
  width: 159.84rpx;
  height: 159.84rpx;
  border-radius: 50%;
  background-color: #ffffff;
}

.camera-icon {
  position: absolute;
  bottom: -1px;
  right: 8px;
  width: 41.8rpx;
  height: 41.8rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  // background-color: rgba(0, 0, 0, 0.6);
  border: 2rpx solid #ffffff;
}

.camera-icon image {
  width: 41.8rpx;
  height: 41.8rpx;
}

// .clear-icon {
//   width: 30rpx;
//   height: 30rpx;
//   margin-left: 20rpx;
//   background-color: #EEEEEE;
//   border-radius: 50%;
//   padding: 8rpx;
// }

.form-section {
  width: 100%;
  max-width: 600rpx;
  // margin-bottom: 80rpx;
}

.input-group {
  margin-bottom: 26rpx;
}

.input-label {
  display: block;
  color: #ffffff;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 50rpx;
  padding: 0 30rpx;
  height: 80rpx;
}

.input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #000000;
  font-size: 28rpx;
  height: 80rpx;
}

.clear-icon {
  width: 38.46rpx;
  height: 38.46rpx;
  margin-left: 12rpx;
}

.arrow-icon {
  width: 25.82rpx;
  height: 25.82rpx;
  // margin-left: 20rpx;
  vertical-align: middle;
}

.button-section {
  display: flex;
  // align-items: center;
  // justify-content: center;
  gap: 30rpx;
  width: 100%;
  max-width: 600rpx;
  margin-top: 8px;
  margin-bottom: 60rpx;
}

.skip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 80rpx;
  background-color: #ffffff;
  color: #000000;
  border: none;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 80rpx;
  background-color: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.skip-btn:active,
.confirm-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.avatar-drawer-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.avatar-drawer {
  width: 100vw;
  background: #ededed;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
  animation: drawerUp 0.25s;
}

@keyframes drawerUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.avatar-drawer-action {
  text-align: center;
  font-size: 34rpx;
  color: #222;
  padding: 40rpx 0;
  border-bottom: 1px solid #e0e0e0;
  background: transparent;
}

.avatar-drawer-action:last-child {
  border-bottom: none;
}
</style>